<template>
    <div v-if="model">
      <nav-bar></nav-bar>
      <div class="detailinfo">
        <div class="video">
          <video controls="controls" :src="model.content"></video>
        </div>
        <div class="detailinfoText">
          <span>{{model.category.title}}</span><span>{{model.name}}</span><span>{{model.date}}</span>
        </div>

        <!--更多视频开始-->
        <div class="detailparent">
          <cover class="detailitem" v-for="(item,index) in commendList" :key="index" :detailitem="item"></cover>
        </div>

        <!--      评论开始-->
        <comment-title :dataLength="lens" @Postcomment="PostSuccess"></comment-title>

        <!--显示评论开始-->
        <comment @lengthselect="len => lens = len" ></comment>
      </div>
    </div>
</template>

<script>
  import NavBar from '../components/common/Navbar'
  import commentTitle from '../components/article/commentTitle'
  import cover from './cover'
  import comment from '../components/article/comment'
    export default {
    components:{
      NavBar,
      cover,
      commentTitle,
      comment
    },
        name: "Article.vue",
        data() {
            return {
              model:null,
              commendList:null,
              lens:null,
              Postcom: {
                comment_content:'',
                comment_date:'',
                parent_id:null,
                article:null,
              },

            }
        },
        methods: {
          async articleitemData(){
            // console.log(this.$route)
            const res = await this.$http.get('/article/' + this.$route.params.id)
            // console.log(res)
            this.model = res.data[0]
            // console.log(this.model)
          },
          async commendData(){
            const res = await this.$http.get('/commend')
            // console.log(res.data)
            this.commendList = res.data
          },
          //发送评论
          async PostSuccess(res){
            // console.log(res)
            const date = new Date()
            let m = date.getMonth()+1
            let d = date.getDate()
            if (m < 0){
              m = '0' + m
            }
            if (d < 10){
              d = '0' + d
            }
            let str = `${m}-${d}`
            this.Postcom.comment_content = res
            this.Postcom.comment_date = str
            this.Postcom.article = this.$route.params.id
            // console.log(this.Postcom)
            const result = await this.$http.post('/comment_post/' + localStorage.getItem('id'),this.Postcom)
            // console.log(result)
          },
          PostChildClick(id){
            console.log(id)
          },
        },

      created() {
        this.articleitemData()
        this.commendData()

      },
      watch:{
        $route(){
          this.articleitemData()
          this.commendData()
        }
      }
    }
</script>

<style scoped lang="less">
  .detailinfo{
    background-color: white;
    .video{
      width: 100%;
      video{
        width: 100%;
      }
    }
    .detailinfoText{
      border-bottom: 0.1vw solid #cccccc;
      padding: 4vw;
      font-size: 3vw;
      display: flex;
      justify-content: space-around;
      align-items: center;
      span:nth-child(1){
        border: 0.1vw solid #ff2ca2;
        font-size: 2.5vw;
        border-radius: 2vw;
        text-align:center;
        padding: 0 1vw;
      }
      span:nth-child(3){
        color: #9c9c9c;
        font-size: 2.8vw;
        font-weight: bold;
      }
    }
  }
  .detailparent{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    .detailitem{
      width: 45%;
    }
  }
</style>
